import { useState, useEffect } from 'react';
import { Select, message } from "antd";
import { getVariateList } from '../../server';

export default function GetVariables(props: any) {
    const { value, onChange, processId } = props;
    const [loading, setLoading] = useState(false);
    const [varsData, setVarsData] = useState([]);

    useEffect(() => {
        setLoading(true);
        getVariateList({ processId }).then((res) => {
            if (res?.code == '200') {
                if (res?.details?.rows) {
                    let _data = res?.details?.rows?.map((item: { varName: string; id: string; }) => {
                        return {
                            label: item?.varName,
                            value: item?.varName,
                        };
                    });
                    setVarsData(_data);
                }
            } else {
                message.error(res?.message);
            }
            setLoading(false);
        }).catch((error) => {
            message.error(error);
            setLoading(false);
        })
    }, []);

    const handleChange = (value: string) => {
        onChange(value);
    };

    return (
        <Select
            loading={loading}
            onChange={handleChange}
            value={value}
            options={varsData}
            allowClear={!!value}
        />
    )
}